<template>
    <view w-full mx-auto p-2 text-gray-400 center>{{ tasklist.create_time }}</view>
    <view flex flex-row m-2 bg-gray-1 p-4 rounded-xl shadow-lg>
        <up-avatar :src="tasklist.worker_id ?tasklist.worker.avatar:''" :text="tasklist.worker_id ?'':'??'" :size="50"></up-avatar>
        <view flex flex-col ml-2>
            <text text-gray-800 text-size-xl>{{ tasklist.worker_id ?tasklist.worker.nickname:'??' }}</text>
            <text text-gray-500 text-size-sm>{{ tasklist.create_time }}</text>
        </view>
        <view ml-auto>
            <text text-size-3xl font-black>{{completeNum}}/{{ tasklist.tasks.length }}</text>
        </view>
    </view>
    <view p-2 bg-white rounded-xl shadow-lg m-2>
        <view v-for="task in tasklist.tasks" flex :class="task.status == 1 ? '' : ''">
            <view v-if="task.status == 1"  mt-2>
                <text text-white bg-green-700 p-1 rounded>{{ task.task }}</text>
                <text text-green-700  i-material-symbols:check ml-2 text-lg></text>
            </view>
            <view v-else bg-violet-600 mt-2 p-1 rounded>
                <text text-white>{{ task.task }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { defineProps,ref,computed } from 'vue';
import { TaskList } from '@/types/task';
// import { onShow } from '@dcloudio/uni-app';

const completeNum = computed(() => {
    return props.tasklist.tasks.filter(task => task.status == 1).length
})
const props =defineProps({
    tasklist: {
        type: Object as () => TaskList,
        required: true
    }
})

</script>